<template>
	<a-button size="mini" style="margin-left: 8px" @click="edit({})">
		<template #icon>
			<icon-plus style="font-size: 16px; color: #b1b2bf" />
		</template>
	</a-button>
	<ComModal ref="ComModalRef" :title="form?.id ? '修改分组' : '添加分组'">
		<div class="add-group">
			<ComTitle title2="图标和名称" title3="选择字段的图标和输入字段的名称"></ComTitle>
			<a-form :model="form" ref="formRef" auto-label-width>
				<a-form-item validate-trigger="input" field="name" :rules="[{ required: true, message: $t('base.placeholder') + $t('dataModel.groupName') }]" hide-label required hide-asterisk>
					<ComIconSelect v-model="form.ico" />
					<a-input v-model="form.name" style="flex: 1;margin-left: 12px;" :placeholder="$t('dataModel.groupName')" />
				</a-form-item>
			</a-form>
		</div>
		<template #footer>
			<a-button type="primary" @click="addGroup" :loading="loading">确认</a-button>
		</template>
	</ComModal>
</template>

<script setup lang="ts">
import ComIconSelect from "@/components/ComIconSelect.vue";
import ComModal from "@/components/ComModal.vue";
import { addFieldGroup, updateFieldGroup } from "@/api/customerManage/setting";
const props = defineProps({
	bizId: {
		type: String,
		default: ""
	}
});
const message = useMessage();
const emit = defineEmits(["update"]);
const ComModalRef = ref({});
const form = ref({
	name: "",
	ico: "",
});
const loading = ref(false);
const formRef = ref({});
const addGroup = async () => {
	const data = await formRef.value.validate();
	if (data) return;
	if (!form.value.ico) return message.error("请选择图标");
	try {
		loading.value = true;
		const api = form.value.id ? updateFieldGroup : addFieldGroup;
		await api({
			...form.value,
			bizId: props.bizId
		});
		emit("update");
		ComModalRef.value.close();
	} catch (error) {
	} finally {
		loading.value = false;
	}
};
const edit = (data) => {
	form.value = JSON.parse(JSON.stringify(data));
	ComModalRef.value.open();
};

defineExpose({
	edit
});
</script>

<style scoped lang="scss"></style>
